<template>
	<view class="flex-col page">
		<view style="background-color: #fff;">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="订单详情" bgColor="#fff" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		<view v-if="!(orderInfo.order_state == 4 || orderInfo.order_state == 5)" class="step-bg">
			<u-steps v-if="orderInfo.order_type == 3" :current="current1" dot="true">
				<u-steps-item title="提交订单"></u-steps-item>
				<u-steps-item title="待付款"></u-steps-item>
				<u-steps-item title="待使用"></u-steps-item>
				<u-steps-item title="已完成"></u-steps-item>
			</u-steps>
			
			<u-steps v-else :current="current" dot="true">
				<u-steps-item title="提交订单"></u-steps-item>
				<u-steps-item title="待付款"></u-steps-item>
				<u-steps-item title="待发货"></u-steps-item>
				<u-steps-item title="待收货"></u-steps-item>
				<u-steps-item title="已完成"></u-steps-item>
			</u-steps>
			
		</view>
		
		<view v-if="orderInfo.order_state == 0" class="order-step-one">
			<text>剩余支付时间</text>
			<view class="flex-row items-center">
				<uni-countdown color="#FF5733" :show-day="false" :show-colon="false" :second="timeupSecond" @timeup="timeup(orderInfo.create_time)" />
				<text>之后自动取消订单</text>
			</view>
			
			
		</view>
		
		<view v-if="orderInfo.merchant_name != ''" class="order-step-one">
			<text style="font-size: 30rpx;">门店：{{orderInfo.merchant_name}}</text>
		</view>
		
		<view class="order-step-one">
			<view class="flex-row items-center">
				<view class="flex-row text-hind" style="width: 95%;">订单编号：<view style="color: #000;">{{orderInfo.order_no}}</view></view>
				<!-- <view style="color: #25A785;">{{setStatus(orderInfo.order_state)}}</view> -->
			</view>
			<view class="text-hind flex-row">下单时间：<view style="color: #000;">{{orderInfo.create_time}}</view></view>
			<view v-if="!(orderInfo.order_state == 0 || orderInfo.order_state == 4)" class="text-hind flex-row">支付时间：<view style="color: #000;">{{orderInfo.pay_time}}</view></view>
			<view v-if="orderInfo.order_state == 3" class="text-hind flex-row">完成时间：<view style="color: #000;">{{orderInfo.received_time}}</view></view>
			<view class="flex-row justify-between items-center">
				<text class="text-hind">联系商家</text>
				<text @click="callShop(orderInfo.kefu_phone)" style="text-decoration: underline;">{{orderInfo.kefu_phone ? orderInfo.kefu_phone : '暂无'}}</text>
			</view>
			<view class="text-hind" v-if="orderInfo.order_state == 0">您的订单已提交成功，请尽快完成付款哦！</view>
		</view>
		
		<view class="order-step-two" style="gap: 20rpx;">
			<view class="addres-info" v-if="!(orderInfo.order_type == 3)">
				<view class="text-hind flex-row">收货姓名：<view style="color: #000;">{{orderInfo.receipt_name}}</view></view>
				<view class="text-hind flex-row">收货电话：<view style="color: #000;">{{orderInfo.receipt_phone}}</view></view>
				<view class="text-hind flex-row" style="width: 100%;">收货地址：<view style="color: #000;">{{orderInfo.receipt_address}}</view></view>
				
			</view>
						
			<view v-if="(orderInfo.order_state == 2 && orderInfo.order_type != 3)" class="text-hind flex-row">物流单号：<view style="color: #000;">{{orderInfo.logistics_no ? orderInfo.logistics_no :'暂无'}}</view></view>
			<view class="flex-row justify-between">
				<view class="text-hind">配送方式：</view>
				<view>{{orderInfo.order_type == 3 ? '虚拟订单无需配送' :shipMethod(orderInfo.shipping_method)}}</view>
			</view>
			
			<view class="flex-row justify-between">
				<view class="text-hind">支付方式：</view>
				<view>{{payStatus(orderInfo)}}</view>
			</view>
		</view>
		
		<view class="order-step-two" style="margin-top: 15rpx;">
			<view v-if="orderInfo.is_parent == 1">
				<view class="flex-col" v-for="(child,ci) in orderInfo.childOrder" :key="ci">
					<view class="goods-item">
						<view style="width: 30%;">
							<image :src="child.sku.sku_img_url" class="card_img"></image>
						</view>
						
						<view class="med_right">
							<view class="font16">{{child.goods.name}}</view>
							<view class="font12 text-hind" style="margin-top: 15rpx;">{{child.sku.sku_name}}</view>
							<view class="flex-row items-center" style="margin-top: 15rpx;">
								<view style="color: #5c8edc;font-size: 30rpx;margin-right: 20rpx;">¥{{child.order_price}}</view>
								<view class="font12 text-hind">x{{child.order_number}}</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="goods-item">
					<view style="width: 30%;">
						<image :src="orderInfo.sku.sku_img_url" class="card_img"></image>
					</view>
					
					<view class="med_right">
						<view class="font16">{{orderInfo.goods.name}}</view>
						<view class="font12 text-hind" style="margin-top: 15rpx;">{{orderInfo.sku.sku_name}}</view>
						<view class="flex-row items-center" style="margin-top: 15rpx;">
							<view style="color: #5c8edc;font-size: 30rpx;margin-right: 20rpx;">¥{{orderInfo.order_price}}</view>
							<view class="font12 text-hind">x{{orderInfo.order_number}}</view>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="order-step-two" style="margin-top: 15rpx;margin-bottom: 160rpx;">
			<view class="flex-row justify-between">
				<view class="text-hind">商品总价：</view>
				<view>¥{{orderInfo.order_total_price}}</view>
			</view>
			<view class="flex-row justify-between">
				<view class="text-hind">优惠金额：</view>
				<view>¥{{orderInfo.order_coupon_price}}</view>
			</view>
			<view v-if="!(orderInfo.order_type == 3)" class="flex-row justify-between">
				<view class="text-hind">运费金额：</view>
				<view>¥{{orderInfo.shipping_fee}}</view>
			</view>
		</view>
		
		<view class="bottom-lay">
			<view v-if="orderInfo.order_state == 0" class="btm1" @click="cancelOrder">
				取消订单
			</view>
			<view v-if="orderInfo.order_state == 0" class="btm1" @click="toPay">
				立即支付
			</view>
			<view v-if="((orderInfo.order_state == 1 || orderInfo.order_state == 2) && orderInfo.merchantOfflineCount > 0)" class="btm1" @click="goUse">
				去使用
			</view>
			<view v-if="orderInfo.order_state == 2" class="btm1" @click="orderReceived">
				确认收货
			</view>
			<view @click="goPublishCom" v-if="(orderInfo.order_state == 3 && orderInfo.comment_status == 0)" class="btm1">
				去评价
			</view>
			<view @click="goAfter" v-if="isShowAfterBtn()" class="btm1">
				申请退款
			</view>
			<view @click="deleteOrder" v-if="(orderInfo.order_state == 3 ||orderInfo.order_state == 4 ||orderInfo.order_state == 5)" class="btm1">
				删除订单
			</view>
			<view @click="goLogistics" v-if="(orderInfo.order_state == 2 && orderInfo.logistics_no != null)" class="btm1">
				查看物流
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id:'',
				orderInfo:{},
				current:0,
				current1:0,
				moreSeven:false,
				timeData:{},
				timeupSecond:''
			};
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44;
			}
		},
		onLoad(op) {
			this.order_id = op.order_id;
		},
		onShow() {
			this.getOrderInfo();
		},
		methods:{
			// 倒计时
			timeup(createTime) {
					var that = this;
					/**setInterval间歇调用 */
					that.timer = setInterval(function () {
					
					let buy_time = createTime.replace(/-/g, '/')
					// var buy_time = createTime;
					
					//计算剩余时间
					var time = (new Date(buy_time).getTime() + 24 * 60 * 60 * 1000) - (new Date().getTime());
					if(time > 0){
					  //计算剩余的分钟
					  var minutes = parseInt(time / 1000 / 60 % 60, 10);
					  //计算剩余的秒数
					  var seconds = parseInt(time / 1000 % 60, 10);
					  that.timeupSecond = parseInt(time / 1000);
					  if(minutes<10){
						minutes = '0' + minutes;
					  }
					  if (seconds < 10) {
						seconds = '0' + seconds;
					  }
					  var timer = minutes + ":" + seconds;
					}
				}, 1000);
				if(that.timeupSecond==0) {
					// uni.showToast({
					// 	title: '时间到'
					// })
					setTimeout(() =>{
						that.getOrderInfo()
					},500)
					
				}
			},

			goUse(){
				uni.navigateTo({
					url:'/pages/order/select_mer?order_id=' + this.orderInfo.order_id
				})
			},
			
			onChange(e){
				this.timeData = e
			},
			callShop(phone){
				if(!phone){
					return;
				}
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			
			isShowAfterBtn(){
				if(this.orderInfo.order_state == 1){
					return true;
				}else if(this.orderInfo.order_state == 2){
					return true;
				}else if(this.orderInfo.order_state == 3){
					if(this.moreSeven){
						return false;
					}else{
						return true;
					}
				}
			},
			///查看物流
			goLogistics(){
				// this.$u.toast('暂无');
				let o = encodeURIComponent(JSON.stringify(this.orderInfo));
				uni.navigateTo({
					url:'/pages/order/logistics?order=' + o
				})
			},
			///申请退款
			goAfter(){
				let o = encodeURIComponent(JSON.stringify(this.orderInfo));
				uni.navigateTo({
					url: '/pages/after_sales/after_sales?order=' + o
				})
			},
			
			///删除订单
			deleteOrder(){
				let that = this;
				uni.showModal({
					title:  '提示',
					content: '确认删除订单吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						if (res.confirm) {
							that.deleteOrderChild();
						}
					}
				})
			},
			deleteOrderChild(){
				this.$request({
					url:"?c=Order&a=orderDele",
					type:'post',
					data:{
						order_id:this.orderInfo.order_id
					}
				}).then(res =>{
					uni.showToast({
						title:'成功'
					})
					setTimeout(() =>{
						 uni.$emit('refresh', 1);
						 uni.navigateBack();
					},1000);
					// tihs.getOrderInfo();
				})
			},
			
			///取消订单
			cancelOrder(){
				let that = this;
				uni.showModal({
					title:  '提示',
					content: '确认取消订单吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						if (res.confirm) {
							that.cancelOrderChild();
						}
					}
				})
			},
			cancelOrderChild(){
				let that = this;
				that.$request({
					url:'?c=Order&a=cancelDele',
					type:'post',
					data:{
						order_id:that.orderInfo.order_id
					}
				}).then(res =>{
					uni.showToast({
						title:'成功'
					})
					that.getOrderInfo();
				})
			},
			
			///确认收货
			orderReceived(){
				let that = this;
				uni.showModal({
					title:  '提示',
					content: '确认收货了吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						if (res.confirm) {
							that.orderReceivedChild();
						}
					}
				})
			},
			orderReceivedChild(){
				let that = this;
				that.$request({
					url:'?c=Order&a=orderEdit',
					type:'post',
					data:{
						order_id:that.orderInfo.order_id,
						edit_type:1
					}
				}).then(res =>{
					uni.showToast({
						title:'成功'
					})
					that.getOrderInfo();
				})
			},
			
			
			
			///去评价
			goPublishCom(){
				let o = encodeURIComponent(JSON.stringify(this.orderInfo));
				uni.navigateTo({
					url: '/pages/comment/publish_com?order=' + o
				})
			},
			
			///待支付 去付款
			toPay(){
				let pack = {}
				pack.goType = 2;
				pack.free_shipping = this.orderInfo.free_shipping;
				pack.fixed_shipping_fee = this.orderInfo.fixed_shipping_fee;
				
				if(this.orderInfo.is_parent == 1){
					pack.sell_price = this.orderInfo.order_total_price;
					pack.order_number = 1;
				}else{
					pack.sell_price = this.orderInfo.order_price;
					pack.order_number = this.orderInfo.order_number;
				}
				pack.order_no = this.orderInfo.order_no;
				pack.order_id = this.orderInfo.order_id;
				pack.paymentMethod = this.orderInfo.paymentMethod;
				pack.coupon = this.orderInfo.coupon;
				pack.fee = this.orderInfo.shipping_fee;
				let p = JSON.stringify(pack)
				uni.navigateTo({
					url:'/pages/order_allocation/order_pay?pack='+p
				})
			},
			
			shipMethod(ship){
				if(ship == 1){
					return '物流'
				}else if(ship == 2){
					return '线下采购'
				}else if(ship == 3){
					return '配送'
				}else if(ship == 4){
					return '无需配送'
				}
			},
			payStatus(item){
				if(item.order_state == 0 || item.order_state == 4){
					return '在线支付'
				}else{
					if(item.payment_type == 1){
						return '云豆支付'
					}else if(item.payment_type == 2){
						return '微信支付'
					}else if(item.payment_type == 3){
						return '云豆组合'
					}else if(item.payment_type == 4){
						return '生日豆支付'
					}else if(item.payment_type == 5){
						return '帮扶豆支付'
					}else if(item.payment_type == 6){
						return '生日豆组合'
					}else if(item.payment_type == 7){
						return '帮扶豆组合'
					}
				}
			},
			setStatus(status){
				//0待付款 1待发货 2待收货 3已完成 4已取消 5已退款
				if(status == 0){
					return '待付款';
				}else if(status == 1){
					return '待发货';
				}else if(status == 2){
					return '待收货';
				}else if(status == 3){
					return '已完成';
				}else if(status == 4){
					return '已取消';
				}else if(status == 5){
					return '已退款';
				}
			},
			getOrderInfo(){
				this.$request({
					url:'?c=Order&a=orderInfo',
					type:'post',
					data:{
						order_id:this.order_id
					}
				}).then(res =>{
					this.orderInfo = res.data;
					
					if(this.orderInfo.order_state == 0){
						this.current = 1
						this.current1 = 0
					}else if(this.orderInfo.order_state == 1){
						this.current = 2
						this.current1 = 1
					}else if(this.orderInfo.order_state == 2){
						this.current = 3
						this.current1 = 2
					}else if(this.orderInfo.order_state == 3){
						this.current = 4
						this.current1 = 3
						
						if(this.orderInfo.received_time != null){
							
							let newTime = this.orderInfo.received_time.replace(/-/g, '/')
							
							// 1. 指定时间
							let specifiedTime = new Date(newTime); 
							
							// 2. 计算指定时间7天后的时间
							let sevenDaysAfterSpecified = new Date(specifiedTime);
							sevenDaysAfterSpecified.setDate(specifiedTime.getDate() + 7);
							
							// 3. 获取当前时间
							const currentTime = new Date(); 
							
							// 4. 比较当前时间和7天后的指定时间 毫秒数
							if (currentTime.getTime() > sevenDaysAfterSpecified.getTime()) {
							    ///超过7天
								this.moreSeven = true;
							} else {
							    this.moreSeven = false;
							}
							
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}
.time {
    @include flex;
    align-items: center;

    &__item {
         color: #fff;
         font-size: 12px;
         text-align: center;
     }
}
.step-bg{
	background-color: #fff;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.order-step-one{
	background-color: #fff;
	margin: 15rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	display: flex;
	gap: 20rpx;
	font-size: 26rpx;
	flex-direction: column;
}
.order-step-two{
	background-color: #fff;
	margin-left: 15rpx;
	margin-right: 15rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	font-size: 26rpx;
}
.goods-item{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 15rpx;
	padding: 15rpx 20rpx;
}
.card_img {
	height: 180rpx;
	width: 180rpx;
	border-radius: 10rpx;
}
.med_right {
	// height: 180rpx;
	margin-left: 20rpx;
	width: 70%;
	
}
.text-hind {
	color: #909090;
	// margin-top: 15rpx;
}
.font12{
	font-size: 25rpx;
}
.font16{
	font-size: 30rpx;
}
.bottom-lay{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 150rpx;
	// line-height: 90rpx;
	width: 100%;
	text-align: center;
	background-color: #fff;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20rpx;
	padding-right: 40rpx;
	padding-bottom: 50rpx;
}
.btm1 {
	padding: 8rpx 25rpx;
	background-color: #ffffff;
	color: #5c8edc;
	border: #5c8edc 1rpx solid;
	border-radius: 35rpx;
	font-size: 28rpx;
}
.addres-info{
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}
</style>
